<template>
  <div
    class="unit-process-info flex"
    :style="{ height: full ? '80vh' : '55vh' }"
  >
    <div class="tab-wrap">
      <div
        class="tab-wrap-item"
        v-for="unit in unitList"
        :key="unit.unitId"
        :class="{ active: unitId === unit.unitId }"
        @click="unitId = unit.unitId"
      >
        {{ unit.unitForShort }}
      </div>
    </div>

    <div class="flex-1 unit-process-info-content">
      <ProcessPane :unit-id="unitId" :matter-id="matterId" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import ProcessPane from './UnitProcessPane.vue'
import { getUnitByMatterId } from '@/api/mission/process'

const { matterId, full } = defineProps<{
  matterId: number
  full: boolean
}>()

const unitList = ref([])
const unitId = ref(0)

defineExpose({ setDeadlineDate })

function setDeadlineDate(dateStr: string) {
  nextTick(() => {
    const dom = document.getElementById('deadline-' + dateStr)
    if (dom) {
      dom.scrollIntoView()
    }
  })
}

async function getProcessUnitList() {
  const { data } = await getUnitByMatterId(matterId)
  if (data.status === 200) {
    unitList.value = data.data
    unitId.value = data.data[0].unitId
  }
}

onMounted(async () => {
  await getProcessUnitList()
})
</script>

<style lang="scss" scoped>
/* 整个滚动条 */
::-webkit-scrollbar {
  width: vw(8);
  height: vh(8) !important;
  opacity: 1;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: vw(8);
  background: rgba(104, 121, 148, 1);
  height: vh(30);
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(104, 121, 148, 1);
  /* 悬停时颜色 */
}
.unit-process-info {
  height: 55vh;
  &-content {
    padding-left: vw(24);
    overflow: auto;
  }
}
.tab-wrap {
  width: vw(136);
  overflow: auto;
  border-radius: vw(4);
  background: rgba(47, 102, 232, 0.1);

  &-item {
    min-height: vh(40);
    font-size: vw(14);
    font-weight: 400;
    padding: vh(11) vw(16);
    color: rgba(108, 128, 151, 1);
    cursor: pointer;

    &.active {
      position: relative;
      font-weight: 700;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 38.62%,
        rgba(47, 102, 232, 1) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    &.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: vw(3);
      height: 100%;
      border-left: vw(3) solid;
      box-sizing: border-box;
      border-image: linear-gradient(
          180deg,
          rgba(47, 102, 232, 0) 0%,
          rgba(47, 102, 232, 1) 50.76%,
          rgba(0, 0, 0, 0) 100%
        )
        3;
      filter: blur(2px);
    }
  }
}
</style>
